<template>
  <el-card>
    <el-row class="headBox">
      <el-col :span="24">
          <el-descriptions :column='4' >
            <el-descriptions-item label="【题型】">{{ questionTypeList() }}</el-descriptions-item>
            <el-descriptions-item label="【编号】">{{ questionsList.id }}</el-descriptions-item>
            <el-descriptions-item label="【难度】">{{ difficultyList() }}</el-descriptions-item>
            <el-descriptions-item contentStyle="width:50%" label="【标签】">{{ questionsList.tags }}</el-descriptions-item>
            <el-descriptions-item label="【学科】">{{ questionsList.subjectName }}</el-descriptions-item>
            <el-descriptions-item label="【目录】">{{ questionsList.directoryName }}</el-descriptions-item>
            <el-descriptions-item label="【方向】">{{ questionsList.direction }}</el-descriptions-item>
          </el-descriptions>
      </el-col>
    </el-row>
    <el-row class="headBox">
      <el-col :span="24">
          <div class="divBox">【题干】:</div>
          <div>
            <p style="color:blue" v-html="questionsList.question"></p>
            <div v-if="questionsList.questionType == 1">
              <p>单选题 选项：（以下选中的选项为正确答案）</p>
              <el-radio-group :value="radio">
                <el-radio class="dadioDan" :label="item.isRight" v-for="item in questionsList.options" :key="item.id">{{item.code}} : {{item.title}}</el-radio>
              </el-radio-group>
            </div>
            <div v-if="questionsList.questionType == 2">
              <p>多选题 选项：（以下选中的选项为正确答案）</p>
              <el-checkbox-group :value="checkList">
                <el-checkbox class="dadioDan" v-for="item in questionsList.options" :key="item.id" :label="item.isRight">{{item.title}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
      </el-col>
    </el-row>
    <el-row class="headBox">
      <el-col :span="24">
        <div class="divBox3">【参考答案】: <el-button type="danger" @click="isVideo=true">参考答案预览</el-button></div>
        <div class="video" v-if="isVideo">
          <video class="video" autoplay controls="controls" :src="questionsList.videoURL"></video>
        </div>
      </el-col>
    </el-row>
    <el-row class="headBox">
      <el-col :span="24">
            <div class="divBox2">【答案解析】: <span class="ps" v-html="questionsList.answer"></span></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
            <div class="divBox">【题目备注】: {{questionsList.remarks}}</div>
      </el-col>
    </el-row>
    <el-row class="footBox">
      <el-col :span="24">
        <el-button type="primary" @click="$emit('close')">关闭</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
// 导入接口数据
import { detail } from '@/api/hmmm/questions'
// 导入枚举数据
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  name: 'QuestionsPreview',
  props: {
    artId: {
      type: Number
    }
  },
  data () {
    return {
      questionsList: {}, // 文章详情信息
      radio: 1, // 单选默认选中
      checkList: [1], // 多选默认选中
      isVideo: false // 视频播放
    }
  },
  created () {
    this.detailList()
  },
  methods: {
    // 渲染选择中的文章信息
    async detailList () {
      const res = await detail({ id: this.artId })
      console.log(res)
      this.questionsList = res.data
    },

    // 题型枚举
    questionTypeList () {
      let res = ''
      questionType.forEach(item => {
        if (item.value === Number(this.questionsList.questionType)) {
          res = item.label
        }
      })
      return res
    },

    // 难度枚举
    difficultyList () {
      let res = ''
      difficulty.forEach(item => {
        if (item.value === Number(this.questionsList.difficulty)) {
          res = item.label
        }
      })
      return res
    }
  }
}
</script>

<style scoped>
.headBox{
  border-bottom: 5px solid rgb(207, 204, 204);
}
.dadioDan{
  display: block;
  padding: 8px 0;
}
p{
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.divBox{
  margin-top: 10px;
}
.divBox2{
  /* line-height: 50px; */
  height: 50px;
}
.divBox3{
  line-height: 50px;
  /* height: 50px; */
}
.footBox{
  padding: 20px 0;
  float: right;
}
.ps{
  display: inline-block;
  margin: 0 !important;
  height: 50px;
}
.video{
  width: 400px;
  height: 300px;
  margin-bottom: 10px;
}
</style>
